
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { findTopCategory } from '@/api/category'

/**
 解决缓存问题
 思路：
   1. 监听id的变化 重新使用最新id发送接口请求
      watch
      beforeRouteUpdate: router内部的钩子函数 每次路由切换之前
      都执行一次 在里面我们可以拿到当前最新的id参数
      在里面重新发送数据请求即可
      精确控制 不会存在浪费

   2. 尝试破坏它的缓存机制 不让它缓存
      router-view + key
      粗暴简单 一旦加上key之后 所有的缓存都没了
      可能会存在浪费

      推荐：在不涉及到性能问题的时候 使用key更加的简单方便
      如果当前路由组件涉及到的组件非常多 且明确要求不能存在浪费 此时选择精细化方案
 */

function useCategory () {
  const route = useRoute() // route === this.$route
  // 如果我想进行路由跳转的话？
  const categoryData = ref([])
  // 首次加载还需要用route.params.id 变化要用to.params.id
  // 默认参数 传就以传入的为主 不传就是等于号后面的
  async function loadCategoryList (id = route.params.id) {
    // 缺少一个id参数
    console.log(route.params)
    const res = await findTopCategory(id)
    categoryData.value = res.result.children
  }
  loadCategoryList()
  // 执行钩子函数
  onBeforeRouteUpdate((to) => {
    // to:跳转到的新路由的路由对象 里面有id
    console.log(to)
    // 使用最新id获取新数据
    loadCategoryList(to.params.id)
  })
  return {
    categoryData
  }
}
export default useCategory
